<template>
    <div>
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
            :size="formSize" status-icon>
            <el-form-item label="登录账号" prop="userName">
                <el-input v-model="ruleForm.userName" placeholder="请输入" :disabled="!isAdd" />
            </el-form-item>
            <el-form-item label="员工姓名" prop="employeeName">
                <el-input v-model="ruleForm.employeeName" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="角色名称" prop="roles">
                <el-select v-model="ruleForm.roles" placeholder="请选择" multiple>
                    <el-option :label="item.name" :value="item.id" v-for="(item, index) in roles" :key="index" />
                </el-select>
            </el-form-item>
            <el-form-item label="密码" prop="password" v-if="isAdd">
                <el-input v-model="ruleForm.password" type="password" placeholder="请输入" show-password />
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-switch v-model="ruleForm.status"
                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" active-value="1"
                    inactive-value="0" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    确认
                </el-button>
                <el-button @click="resetForm(ruleFormRef)">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { AddEmployees, updateEmployee, getRoles } from '@/api/permission.js'
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
const props = defineProps({
    isAdd: {
        type: Boolean,
        default: false, // 默认值为 true
    },
    row: {
        type: Object,
        default: () => ({}), // 默认值为一个空对象
    },
})
const emit = defineEmits(['closeAdd', 'closeOK'])
const formSize = ref('default')
const ruleFormRef = ref()
const ruleForm = reactive({
    userName: '',
    password: '',
    employeeName: '',
    status: '',
    roles: [],
})
const roles = reactive([])

const rules = reactive({
    userName: [
        { required: true, message: '请输入账号名称', trigger: 'blur' },
        { min: 1, max: 20, message: '长度在20个字以内', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
    ],
    employeeName: [
        { required: true, message: '请输入员工姓名', trigger: 'blur' },
    ],
    roles: [
        { required: true, message: '请选择角色', trigger: 'change' },
    ]

})

const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            if (props.isAdd) {
                AddEmployees(ruleForm).then(res => {
                    if (res.code == 200) {
                        ElMessage({
                            type: 'success',
                            message: '添加成功',
                        })
                        emit('closeOK')
                    }
                })
            } else {
                updateEmployee({ ...ruleForm, id: props.row.id }).then(res => {
                    if (res.code == 200) {
                        ElMessage({
                            type: 'success',
                            message: '修改成功',
                        })
                        emit('closeOK')
                    }
                })
            }
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = () => {
    emit('closeAdd')
}
const getRolesData = () => {
    roles.length = 0
    getRoles().then(res => {
        if (res.code == 200) {
            roles.push(...res.data)
        }
    })
}

onMounted(() => {
    console.log(props.row);
    
    getRolesData()
    if (!props.isAdd) {
        ruleForm.userName = props.row.username;
        ruleForm.employeeName = props.row.employeeName;
        ruleForm.status = props.row.status;
        ruleForm.roles = props.row.roleIds;
    }
})

</script>

<style lang="scss" scoped></style>